<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>demo_cli</title>
  <script>
    // 微信字体大小改变导致H5页面布局错乱 Android 则通过js 调整
    (function () {
      if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
        handleFontSize();
      } else {
        if (document.addEventListener) {
          document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
        } else if (document.attachEvent) {
          document.attachEvent("WeixinJSBridgeReady", handleFontSize);
          document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
        }
      }
      function handleFontSize() {
        WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
        WeixinJSBridge.on('menu:setfont', function () {
          WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
        });
      }
    })();
  </script>
</head>

<style>
  #app>#preLoader {
    width: 100%;
    text-align: center;
    /* padding-top: 15rem;
      font-size: 2rem; */
    padding-top: 140px;
    font-size: 32px;
    font-weight: bold;
  }

  #app>#preLoader>div>span#first {
    /*设置渐变背景，最好设置为能无缝拼接的渐变*/
    background-image: -webkit-linear-gradient(left, red, white 12.5%, red 25%, white 37.5%, red 50%, red 100%);
    /*文字填充色为透明*/
    -webkit-text-fill-color: transparent;
    /*背景剪裁为文字，相当于用背景填充文字*/
    -webkit-background-clip: text;
    /*将背景拉长一倍，给予移动变化空间，用作流光效果*/
    -webkit-background-size: 400% 100%;
    -webkit-animation: light 2s infinite linear;
  }

  #app>#preLoader>div>span#second {
    /*设置渐变背景，最好设置为能无缝拼接的渐变*/
    background-image: -webkit-linear-gradient(left,
        black,
        black 50%,
        white 62.5%,
        black 75%,
        white 87.5%,
        black 100%);
    /*文字填充色为透明*/
    -webkit-text-fill-color: transparent;
    /*背景剪裁为文字，相当于用背景填充文字*/
    -webkit-background-clip: text;
    /*将背景拉长一倍，给予移动变化空间，用作流光效果*/
    -webkit-background-size: 800% 100%;
    -webkit-animation: light 2s infinite linear;
  }

  @keyframes light {
    0% {
      background-position: 0 0;
    }

    100% {
      background-position: -100% 0;
    }
  }
</style>

<body>
  <noscript>
    <strong>We're sorry but demo_cli doesn't work properly without JavaScript enabled. Please enable it to
      continue.</strong>
  </noscript>
  <div id="app">
    <div id="preLoader">
      <div>
        <span id="first">LOVE</span>
        <span id="second">
          <script>
            // var pathArr = window.location.pathname.split("/");
            document.getElementById("second").innerHTML = "娟";
          </script>
        </span>
      </div>
    </div>
  </div>
  <!-- built files will be auto injected -->
</body>

</html>